<template>
    <div class="two">
        <div id="mainFive">
        </div>
    </div>
</template>

<script>
    //象形图
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                value: '',
                yearly: [],
                countrylist: [],
                isLoading: false,
                dateboundlist: [], 
                myChart: null,
            }
        },
        mounted() {
            this.getDataDraw();
        },
        methods: {
            //请求数据
            getDataDraw() {
                this.isLoading = true;
                this.$store.dispatch("ajaxApi", {
                    // this.$store.dispatch("ajax", {
                    url: `/zonghe/api/algor?name.equals=后勤能力&sort=add_time,desc&size=1`,
                    method: "get",
                    succeed: (res) => {
                        console.log(res);
                        let data = JSON.parse(res[0].outputs)
                        let forecast = data.forecast;
                        let original = data.original;
                        console.log(original);
                        console.log(forecast);
                        for (let key in original) {
                            if (this.yearly.length == 0) {
                                for (let item of original[key]) {
                                    this.yearly.push(item.x);
                                    this.yearly.sort();
                                }
                            }
                            let obj = {};
                                obj.name = key;
                                obj.type = 'line';
                                obj.stack = 'Total';
                                obj.areaStyle= {};
                                obj.emphasis= {
                                    focus: 'series'
                                 };
                                 obj.data=[];
                            for (let a of original[key]) {
                                obj.data.push(a.y);
                                
                            }
                            this.dateboundlist.push(obj);
                        }
                         this.yearly.push(Number(this.yearly[this.yearly.length-1])+1);
                               for (let i in forecast) {
                                let small = {};
                                small.name = i;
                                small.type = 'line';
                                small.stack = 'Total';
                                small.areaStyle= {};
                                small.emphasis= {
                                    focus: 'series'
                                 };
                                 small.data=[];
                                 small.data.push(forecast[i].y)
                                this.dateboundlist.push(small);
                        }
                        this.value = this.yearly[0]
                        this.initCharts(this.dateboundlist);
                    },
                    errored: (err) => {
                        // console.log(err);
                        if (err.response) {
                            this.islistLoad = false;
                            this.modelsData = [];
                        }
                    }
                });
            },
            initCharts(seconddata) {
                console.log(seconddata)
                 this.$emit('changeNum','five',{arr: this.yearly,value: this.value})
                let namelist = [];
                let dataArray = [];
                for (let item of seconddata) {
                    namelist.push(item.name);
                    dataArray.push(item.value)
                }
                var chartDom = document.getElementById('mainFive');
                this.myChart = echarts.init(chartDom);
                var option;
                option = {
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#fff'
                    }
                    }
                    },
                      legend: {
                        data: namelist,
                             textStyle: {
            color: '#fff'
          },
              top: '5%',
                        left: '2%',
                        orient: 'vertical',
                    },
                    textStyle: {
                        color: '#fff'
                    },
                    grid: {
                        left: '20%',
                        right: '0%',
                        top: '3%',
                        bottom: '0%',
                        containLabel: true
                    },
                    yAxis: {
                           type: 'value'
                    },
                    xAxis: {
                            type: 'category',
                            data: this.yearly
                    },
                    series: seconddata
                };

                option && this.myChart.setOption(option);
                                                          window.addEventListener('resize', () => {
                // 自动渲染echarts
                this.myChart.resize();
      })
            },
            //切换数据
            changeNum(val) {
                var option = this.myChart.getOption();
                for (let item of this.dateboundlist[val]) {
                    item['symbol'] = 'image://../../../../../static/image/food.png';
                }
                option.series[0].data = this.dateboundlist[val];
                this.myChart.setOption(option);
            }
        }
    }
</script>

<style scoped>
    .two {
        width: 100%;
        height: 100%;
    }

    .header-select {
        width: 100%;
        height: 30px;
        text-align: center;
    }

    #mainFive {
        width: 100%;
        height:100%;
        /* height: calc(100% - 50px); */
    }
</style>